<template>
    <div class="project">
        <div class="cardBox">
            <div 
                class="card" 
                v-for="(item, i) in projectList" 
                :key="i" 
                @click="open(item.url)"
            >
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                <div style="padding: 14px;" >
                    <p>{{item.title}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Project",
    data () {
        return {
            projectList:[
                {
                    title: '云南省互联网+不动产登记平台',
                    url: 'http://39.108.58.158:8090/ynwwsq'
                },
                {
                    title: '重庆外网申请',
                    url: 'http://39.108.58.158:8090/cqwwsq'
                },
                {
                    title: '通用web定制平台',
                    url: 'http://39.108.58.158:8090/gtweb2'
                },
                {
                    title: '福建省不动产登记网上申请系统',
                    url: 'http://39.108.58.158:8089/fjweb'
                },
                {
                    title: '广州外网不动产申请系统',
                    url: 'http://39.108.58.158:8090/gzwwsqst'
                },
                {
                    title: 'Jenkins自动化部署平台',
                    url: 'http://39.108.58.158:8077/jenkins/'
                },
            ]
        }
    },
    components: {
        
    },
    mounted () {
        
    },
    methods: {
        open(url){
            window.open(url);
        }
    },
}
</script>

<style lang="less" scoped>
.project{
    width: 100%;    

    .card{
        display: inline-block;
        width: 300px;
        height: 350px;
        background-color: #fff;
        transition: all .3s ease-in-out;
        border-radius: 4px;
        margin-right: 147px;
        margin-bottom: 50px;
        padding: 1px;
        cursor: pointer;
        overflow: hidden;

        &:nth-child(3n){
            margin-right: 0;
        }

        .image {
            width: 100%;
            display: block;
        }
        p{
            text-align: center;
        }      
        &:hover{
            transform: scale(1.05);
        }
    }

}

</style>